<template>
  <div class="retailmember">
    <van-pull-refresh v-model="refreshing" :head-height="80" @refresh="refresh">
         <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="8"
            :immediate-check="false"
            finished-text="到底咯..."
            @load="load"
        >
            <div class="kickback">
                <div v-for="(item,key) in list" :key="key" class="item">
                    <div class="left">
                        <div class="img">
                            <img :src="item.avatar_text" />
                        </div>
                        <div class="content">
                            <div class="nickname">{{ item.nickname }}</div>
                            <div class="tel">{{ item.mobile }}</div>
                        </div>
                    </div>
                    <div class="right">{{ item.createtime_text }}</div>
                </div>
            </div>
            
        </van-list>
    </van-pull-refresh>
    <!-- 返回顶部 -->
    <van-back-top />
  </div>

  <Tabbar />
</template>

<script setup>

    const {proxy} = getCurrentInstance();

    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新
    onMounted(()=>{
        load()
    })
      //下拉刷新
    const refresh = async () =>
    {
        //可以去掉定时器
        setTimeout(() => {
        //清空查询参数
            page.value = 1
            list.value = []
            finished.value = false
            loading.value = true
        //加载数据方法
        load()
        }, 1000)
    }
      //加载数据方法
    const load = async () =>
    {
        //上拉刷新 下拉加在
        //判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false
        }
        //发送请求
        var res = await proxy.$POST({
            url:'/sale/business',
            params:{id:proxy.$business.value.id,page:page.value}
        })
        //请求发送完毕后，加载状态也就完毕了
        loading.value = false//请求完毕后加载一下

        if(!res) return false

        if(res.code == 0)
        {
        //如果没有更多数据了 就说明已经加载到底了....
            finished.value = true
            return false
        }
        page.value++; //页数改变
        // 合并数组
        list.value = list.value.concat(res.data)
    }

</script>

<style scoped>
  @import url('/assets/css/SaleBusiness.css');
</style>